<template>
<div>
  <div class="divTop" v-model="search">
    <span>类型</span><el-select v-model="search.complaintType" placeholder="请选择类型（投诉、建议）">
    <el-option label="投诉" value="Complaint"></el-option>
    <el-option label="建议" value="Suggest"></el-option>
  </el-select>
    <el-button class="souSuoBut" @click="searchDJ" type="success" size="small" icon="el-icon-search">搜索</el-button>
    <el-button @click="searchCZ" size="small" icon="el-icon-refresh">重置</el-button>
  </div>
  <!--  中层按钮-->
  <div>
    <el-row class="but-add">
      <el-button type="warning" size="small" @click="derive">导出</el-button>
    </el-row>
  </div>
  <!--  数据展示-->
  <el-table
      :data="complaints"
      :cell-style="{'text-align':'center'}"
      :header-cell-style="{background:'#F8F8F9','text-align':'center',color:'#000'}"
      @select="selectRoleOneId"
      @select-all="selectRoleAllIds"
      style="width: 100%">
    <el-table-column type="selection"></el-table-column>
    <el-table-column
        type="index"
        label="序号"
        width="100">
    </el-table-column>
    <el-table-column
        prop="complaintSuggestType"
        label="类型"
        width="150">
      <template slot-scope="scop">
        <span v-if="scop.row.complaintSuggestType == 'Complaint'">投诉</span>
        <span v-if="scop.row.complaintSuggestType == 'Suggest'">建议</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="complaintSuggestContent"
        label="内容"
        width="200">
    </el-table-column>
    <el-table-column
        prop="ownerName"
        label="创建者名称"
        width="150">
    </el-table-column>
    <el-table-column
        prop="ownerPhone"
        label="创建者电话"
        width="180">
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间"
        width="200">
    </el-table-column>
    <el-table-column
        prop="ownerPort"
        label="图片"
        width="180">
      <template slot-scope="scope">
        <img v-for="imge in scope.row.complaintImgs.split(',')" :src="imge" style="width: 60px;height: 60px;margin-right: 10px"></img>
      </template>
    </el-table-column>
    <el-table-column
        prop="remark"
        label="备注"
        width="180">
    </el-table-column>
    <el-table-column
        label="操作">
      <template slot-scope="scope">
        --
      </template>
    </el-table-column>
  </el-table>
  <!--  分页-->
  <div class="block">
    <el-pagination
        @size-change="sizeTo"
        @current-change="pageTo"
        :current-page="page"
        :page-sizes="[1,5,20, 30, 40]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="sizes">
    </el-pagination>
  </div>

</div>
</template>

<script>
import {saveAs} from "file-saver";
export default {
  data(){
    return{
      search:{complaintType:null},
      complaints:[],
      pages:1,
      page:1,
      size:5,
      sizes:0,
      complaintIds:[],

    }
  },
  methods:{
    selectComplaintAll(page,size){
      this.page = page;
      this.size = size;
      this.$axios.post("/zyComplaintSuggest/selectComplaintAllPage/"+page,{
        size:this.size,complaintType:this.search.complaintType,
      })
          .then(result =>{
            if (result.data.code==200){
              console.log(result.data.data.records)
              this.complaints = result.data.data.records;
              this.pages = result.data.data.pages;
              this.sizes = result.data.data.total;
            }
          })
    },
    //页码刷新
    pageTo(val){
      this.selectComplaintAll(val,this.size);
      this.page=val;
    },
    //条数刷新
    sizeTo(val){
      this.selectComplaintAll(this.page,val);
      this.size=val;
    },
    //获取多行数据
    selectRoleOneId(val){
      this.complaintIds=[];
      for (let i = 0; i < val.length; i++) {
        this.complaintIds[i]=val[i].complaintSuggestId;
      }
      console.log(this.complaintIds)

    },
    //获取全部行数据
    selectRoleAllIds(val){
      this.complaintIds=[];
      for (let i = 0; i < val.length; i++) {
        this.complaintIds[i]=val[i].complaintSuggestId;
      }
      console.log(this.complaintIds)
    },
    //搜索重置点击
    searchCZ(){
      this.search={complaintType:null};
      this.selectComplaintAll(this.page,this.size);
    },
    //搜索点击
    searchDJ(){
      this.selectComplaintAll(1,this.size);
    },
    //导出
    derive(){
      this.$prompt('请输入导出文件名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        this.$axios.get("/zyComplaintSuggest/derive?complaintIds="+this.complaintIds,{responseType: 'arraybuffer'})
            .then(result =>{
              const blob = new Blob([result.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
              saveAs(blob, value + '.xlsx');
              this.selectComplaintAll(this.page,this.size);
              this.$message({
                type: 'success',
                message: '文件：'+value+'导出成功！'
              });
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消导出！'
        });
      });
    }

  },
  mounted() {
    this.selectComplaintAll(this.page,this.size);
  }
}
</script>

<style scoped>
.divTop{
  margin-bottom: 20px;
  text-align: left;
}
.divTop>span{
  margin-right: 10px;
  margin-left: 20px;
}
.block{
  float: right;
  margin-right: 30px;
  margin-top: 30px;
}
.but-add{
  float: left;
  margin-bottom: 20px;
  margin-left: 20px;
}
.souSuoBut{
  margin-left: 20px;
}
</style>
